<template>
	<view class="container">
		
		<u-form :model="form" ref="uForm" label-position="top" :error-type="['toast']">
			<u-form-item label="药品名称" prop="name">
				<u-input v-model="form.name"/>
			</u-form-item>
			<u-form-item label="服用管道" prop="wayVal">
				<u-radio-group v-model="form.wayVal" @change="radioGroupChange">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.value"
						:disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
<!-- 			<u-form-item label="药物形状">
				<u-radio-group >
					<u-radio v-for="(item, index) in radio1List" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item> -->
			<u-form-item label="用药次数" prop="dailyTimes">
				<u-number-box v-model="form.dailyTimes" @change="valChange"></u-number-box>
			</u-form-item>
			<u-form-item label="用药计量" prop="quotaPerTime">
				<u-input v-model="form.quotaPerTime" type="number"/>
				<u-button slot="right" type="success" size="mini" @click="quotaPerTimeShow=true">{{form.unit}}</u-button>
			</u-form-item>
			<u-form-item label="用药时间" prop="daytimeList">
				<view class="time-view">
					<view v-for="(item, index) in form.daytimeArrayList">
						<text>第{{index + 1}}次:{{item}}</text>
						<u-icon name="trash" class="del" @click="timeDelClick(index)"></u-icon>
					</view>
				</view>
				<u-icon slot="right" name="plus-circle" @click="addClick" size="48"></u-icon>
			</u-form-item>
			<u-form-item label="用药备注" prop="remark">
				<u-input v-model="form.remark"/>
			</u-form-item>
			<u-form-item label="照片">
				<u-upload ref="uUpload" width="140" height="140"
					:action="action" :form-data="formData" :header="header"
					:auto-upload="true">
				</u-upload>
			</u-form-item>
			<u-picker v-model="timeShow" mode="time" :params="params" @confirm="timeConfirm"></u-picker>
			<!-- <u-select v-model="quotaPerTimeShow" :list="quotaPerTimeList" @confirm="quotaPerConfirm"></u-select> -->
			<u-action-sheet 
				:list="quotaPerTimeList" 
				v-model="quotaPerTimeShow"
				cancel-text="新增"
				@close="addQuotaClick"
				@click="quotaPerConfirm"
				></u-action-sheet>
			<u-modal 
				v-model="quotaAddShow" 
				title="请输入单位"
				@confirm="addConfirm"
				:show-cancel-button="true">
				<view class="slot-content">
					<u-input v-model="value"></u-input>
				</view>
			</u-modal>
		</u-form>
		<u-button class="action-view" @click="saveClick">保存</u-button>
	</view>
</template>

<script>
	import { formatDateByTimestamp } from '@/utils/utils.js'
	import { uploadRecordImg } from '@/api/record.js'
	import { http } from '@/api/service.js'
	export default {
		data() {
			return {
				action: '',
				formData: {
					'recordType': 'handover'
				},
				header: {
					ticket: '',
				},
				
				form: {
					name: '',
					way: '',
					wayVal: '',
					dailyTimes: 0,
					quotaPerTime: '',
					unit: '包',
					
					daytimeArrayList: [],
					daytimeList: '',
					remark: '',
					image: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请填写药品名称',
					}, ],
					wayVal: [{
						required: true,
						message: '请选择药物服用方式',
					}, ],
					dailyTimes: [
						{
							validator: (rule, value, callback) => {
								return value > 0;
							},
							message: '请填写用药次数',
						}
					],
					quotaPerTime: [{
						required: true,
						message: '请填写用药计量',
					}]
				},
				
				radioList: [
					{
						name: '口服',
						value: '0',
					},{
						name: '外敷',
						value: '1',
					},

				],
				radio1List: [{
						name: '液体',
					},
					{
						name: '粉状',
					},
					{
						name: '颗粒'
					}
				],
				
				timeShow: false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false,
					timestamp: true,
				},
				
				fileList: [],
				
				quotaPerTimeShow: false,
				quotaAddShow: false,
				quotaPerTimeList: [
					{
						value: '1',
						text: '包'
					},
					{
						value: '2',
						text: 'ml'
					},
					{
						value: '3',
						text: 'g'
					}
				],
				value: ''
			}
		},
		onLoad() {
			if (this.appType === 'app-p' || this.appType === 'mp-p') {
				this.action = `${http.config.baseURL}wx/api/upload/file`;
			} else {
				// this.action = `${http.config.baseURL}pad/upload/record_img`;
					this.action = `${http.config.baseURL}wx/api/upload/file`;
			}
			this.header.ticket = uni.getStorageSync('ticket');
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			valChange() {
				console.log('valChange');
			},
			addClick() {
				this.timeShow = true;
			},
			
			timeConfirm(res) {
				console.log(res);
				let time = formatDateByTimestamp(res.timestamp, 'yyyy/mm/dd hh:MM:ss');
				this.form.daytimeArrayList.push(time);
			},
			
			saveClick() {
				console.log(this.form);
				this.$refs.uForm.validate(async valid => {
					console.log(valid);
					if (valid) {
						uni.showLoading({})
						let files = this.$refs.uUpload.lists;
						let image = '';
						for (let index in files) {
							let item = files[index];
							image += `|${item.response.data}`;
						}
						if (image.length > 0) {
							image = image.substring(1);
						}
						this.form.image = image;
						
						let daytimeList = '';
						for (let index in this.form.daytimeArrayList) {
							let item = this.form.daytimeArrayList[index];
							daytimeList += `|${item}`;
						}
						if (daytimeList.length > 0) {
							daytimeList = daytimeList.substring(1);
						}
						this.form.daytimeList = daytimeList;
						uni.hideLoading();
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('addSuccessEvent', this.form);
						uni.navigateBack({})
						return;
					}
				});
			},
			
			timeDelClick(index) {
				this.form.daytimeArrayList.splice(index, 1);
			},

			removeEvent(index, lists, name) {
				console.log(index);
			},
			
			quotaPerConfirm(index) {
				console.log(index);
				this.form.unit = this.quotaPerTimeList[index].text;
			},
			
			addQuotaClick() {
				this.value = ''
				this.quotaPerTimeShow = false
				this.quotaAddShow = true;
			},
			
			radioGroupChange(res) {
				this.form.way = this.radioList[res].name;
			},
			
			addConfirm() {
				this.form.unit = this.value
			}
		}

	}
</script>

<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss" scoped>
	@import '@/css/u-form.scss';
	
	.container {
		padding-left: $app-page-padding;
		padding-right: $app-page-padding;
		padding-bottom: $app-page-padding;
		display: flex;
		flex-direction: column;
	}

	.children-view {
		width: 10rpx;
		flex: 1;
		display: flex;
		flex-direction: row;
	}

	.time-view{
		display: flex;
		flex-direction: column;
		
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		
		.del{
			margin-left: 10rpx;
		}
	}
	
	.slot-content {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
</style>